<template>
  <div class="receivingAddress">
    <x-header>管理收货地址</x-header>
    <group class='addressList'>
      <div class='listItem' v-for="item in list" :key="item.id">
        <div class='info'>
          <span class='name'>{{item.name}}</span>
          <span class='phone'>{{item.phone}}</span>
        </div>
        <div class='address'>{{item.address}}</div>
        <div class='action'>
          <span @click="checkDefault(item.id)">
            <span v-if='checked==item.id'>
              <x-icon type="ios-checkmark" class="checker"></x-icon>
            </span>
            <span v-else>
              <x-icon type="ios-circle-outline" class="checker"></x-icon>
            </span>
            <span>默认地址</span>
          </span>
          <div class='edit'>
            <router-link :to="'/addAddress?edit='+item.id">编辑</router-link>
            <span @click="deleteAddress(item.id)">删除</span>
          </div>
        </div>
      </div>
    </group>
    <router-link to='/addAddress' class="addBtn">
      <x-button type='primary'>+新增收货地址</x-button>
    </router-link>
    <div v-transfer-dom>
      <confirm v-model="show" title="提示信息" @on-confirm="onConfirm" @on-cancel='onCancel'>确认删除此条地址信息吗？</confirm>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show:false,   //显示删除提示弹出层
      checked: 1,   //选中的默认地址id
      deleteId:'',  //需要删除的地址的id
      //收货地址列表数据
      list: [
        { id: 1, name: '王小姐', phone: '15111111111', address: '湖南省长沙市芙蓉区车站北路证券大厦4楼方正证券', default: true },
        { id: 2, name: '李小姐', phone: '15111111112', address: '湖南省长沙市芙蓉区车站北路证券大厦3楼方正证券', default: false },
        { id: 3, name: '张小姐', phone: '15111111113', address: '湖南省长沙市芙蓉区车站北路证券大厦2楼方正证券', default: false },
      ]
    }
  },
  computed: {
    defaultCheck(key) {
      if (this.checked == key) {
        return 'ios-checkmark';
      } else {
        return 'ios-circle-outline';
      }
    },
  },
  methods: {
    //选择默认地址
    checkDefault(key) {
      console.log(key);
      this.checked = key;
    },
    //删除地址
    deleteAddress(id) {
      this.show = true;
      this.deleteId = id;
    },
    //确认删除地址
    onConfirm(){
      this.list = this.list.filter(item=>item.id != this.deleteId);
    },
    //取消删除地址 清空删除id
    onCancel(){
      this.deleteId = '';
    }
  }
}
</script>

<style lang="less" scoped>
.addressList {
  margin-bottom: 40px;
  .listItem {
    padding: 10px;
    margin-bottom: 10px;
    border-top: 1px solid #c6c6c6;
    .info .phone {
      float: right;
    }
  }
  .listItem:first-child {
    border-top: 0;
  }
  .address {
    font-size: 14px;
    color: #c6c6c6;
    padding: 8px 0;
    border-bottom: 1px solid #c6c6c6;
  }
  .action {
    overflow: hidden;
    margin-top: 8px;
    .checker {
      vertical-align: middle;
      margin-bottom: 4px;
      fill: #ffa534;
    }
    .edit {
      float: right;
      a {
        margin: 0 12px;
      }
    }
  }
}
.addBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  button {
    font-size: 14px;
  }
}
</style>
